<template>
    <el-container height='545px'>
        <el-container height='49px'>
            <el-header height='49px'>
                <div :class="{'titles':item.index == isshow}" v-for="item in listfloor" :key="item.index"
                    @click="isshow = item.index,currentTab=item.name">{{item.Flooname}}</div>
            </el-header>
            <el-main height='496px'>
                <component :is="currentTab"></component>
            </el-main>
        </el-container>
        <el-aside width="200px" height='496px'>
            <div class="operation">
                <div>
                    <!-- Form -->
                    <el-button type="text" @click="dialogFormVisible = true">开台</el-button>

                    <el-dialog title="开台" :visible.sync="dialogFormVisible" style="font-size:25px">
                        <el-form :model="form">
                            <el-form-item label="房间号" :label-width="formLabelWidth" class="inputbox top"
                                style="display:flex">
                                <el-input v-model="form.name" autocomplete="off" class="input" @focus="keystate1">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="服务人数" :label-width="formLabelWidth" class="inputbox"
                                style="display:flex">
                                <el-input v-model="numbers" autocomplete="off" placeholder="请输入服务人数" class="input"
                                    @focus="keystate2" :max="2"></el-input>
                                <!-- 输入框切换 -->
                                <div class="keyboard" v-if="keystate == true">
                                    <div class="keyboard-box" v-for="item in keyboard" :key="item.index"
                                        @click="num(item.keynum,item.index)">
                                        {{item.keynum}}
                                    </div>
                                </div>
                                <div class="keyboard" v-else>
                                    <div class="keyboard-box" v-for="item in keyboard" :key="item.index"
                                        @click="num2(item.keynum,item.index)">
                                        {{item.keynum}}
                                    </div>
                                </div>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false"
                                style="display:block;background-color:#F5E5D1">取 消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false">
                                <div @click="aaddproject">确定</div>
                            </el-button>
                        </div>
                    </el-dialog>
                </div>
                <div>
                    <!-- Form -->
                    <el-button type="text" @click="dialogFormVisible2 = true">点单</el-button>

                    <el-dialog title="点单" :visible.sync="dialogFormVisible2">
                        <el-form :model="form">
                            点单
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                            <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <div>
                    <!-- Form -->
                    <el-button type="text" @click="dialogFormVisible3 = true">转房间</el-button>

                    <el-dialog title="转房间" :visible.sync="dialogFormVisible3">
                        <el-form :model="form">
                            转房间
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                            <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <div>
                    <div class="settlement">
                        结算
                    </div>
                </div>
            </div>
            <div class="statetitle">
                <p>房间状态</p>
            </div>
            <div class="roomstate">
                <div>
                    <div class="allnum">
                        <p class="all">全部</p>
                        <p>({{allRooms.total}})</p>
                    </div>
                </div>
                <div>
                    <div class="leisurenum">
                        <p class="all">空闲</p>
                        <p>({{freeRoom}})</p>
                    </div>
                </div>
                <div>
                    <div class="usenum">
                        <p class="all">使用中</p>
                        <p>{{userRoom}}</p>
                    </div>
                </div>
                <div>
                    <div class="clearnum">
                        <p class="all">清扫中</p>
                        <p>{{clearRoom}}</p>
                    </div>
                </div>
            </div>
        </el-aside>
    </el-container>
</template>

<script>
    import All from './all.vue'
    import First from './first.vue'
    import Two from './two.vue'
    import {
        createNamespacedHelpers
    } from "vuex";
    const {
        mapActions,
        mapState,
        mapMutations
    } = createNamespacedHelpers("homecontent");
    export default {
        components: {
            All,
            First,
            Two
        },
        data() {
            return {
                listfloor: [{
                        Flooname: "全部",
                        index: "1",
                        name: "all"
                    },
                    {
                        Flooname: "一楼",
                        index: "2",
                        name: "first"
                    },
                    {
                        Flooname: "二楼",
                        index: "3",
                        name: "two"
                    },
                ],
                currentTab: 'all',
                isshow: '1',
                listoperation: [{
                        operationname: "开台",
                        index: "1"
                    },
                    {
                        operationname: "点单",
                        index: "2"
                    },
                    {
                        operationname: "转房间",
                        index: "3"
                    },
                    {
                        operationname: "结算",
                        index: "4"
                    },
                ],
                dialogFormVisible: false,
                dialogFormVisible2: false,
                dialogFormVisible3: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                keyboard: [{
                        keynum: '7',
                        index: '1'
                    },
                    {
                        keynum: '8',
                        index: '2'
                    },
                    {
                        keynum: '9',
                        index: '3'
                    },
                    {
                        keynum: '清除',
                        index: '4'
                    },
                    {
                        keynum: '4',
                        index: '5'
                    },
                    {
                        keynum: '5',
                        index: '6'
                    },
                    {
                        keynum: '6',
                        index: '7'
                    },
                    {
                        keynum: '0',
                        index: '8'
                    },
                    {
                        keynum: '1',
                        index: '9'
                    },
                    {
                        keynum: '2',
                        index: '10'
                    },
                    {
                        keynum: '3',
                        index: '11'
                    },
                    {
                        keynum: '.',
                        index: '12'
                    },
                ],
                // 键盘输入框状态
                keystate: true,
                // 服务人数绑定值
                numbers: '',
            }
        },
        methods: {
            ...mapActions(["founding"]),
            // 房间号
            num(val, index) {
                if (index != 4) {
                    const num = String(val)
                    this.form.name += num;
                    // console.log(this.form.name.length);
                } else if (index == 4 && this.form.name.length > 0) {
                    const num2 = this.form.name.split('');
                    num2.length--
                    const num3 = num2.join('')
                    this.form.name = num3
                }
            },
            // 服务人数
            num2(val, index) {
                if (index != 4) {
                    const num = String(val)
                    this.numbers += num;
                } else if (index == 4 && this.numbers.length > 0) {
                    const num2 = this.numbers.split('');
                    num2.length--
                    const num3 = num2.join('')
                    this.numbers = num3
                }
            },
            // 点击确定开台触发
            async aaddproject() {
                const numberofpeopleserved = this.numbers - 0
                const roomNum = this.form.name
                const data = await this.founding({
                    numberofpeopleserved: numberofpeopleserved,
                    roomNum: roomNum
                })
                // console.log(data);
                if (data.data.stateCode == 403) {
                    this.$message.error('房间使用中');
                } else {
                    this.$message('成功开房');
                    this.$router.push({
                        path: '/Home/aaddproject/',
                        query: {
                            name: roomNum,
                            orderid:data.data.data.id
                        }
                    });
                }
            },

            // 房间输入框失去焦点触发
            keystate1() {
                this.keystate = true
            },
            // 服务人数失去焦点触发
            keystate2() {
                this.keystate = false
            },
        },
        computed: {
            ...mapState(["allRooms", "freeRoom", "userRoom", "clearRoom"]),
        },
        watch: {
            // 监听服务人数输入框的数字
            numbers: {
                handler(newValue, oldValue) {
                    if (newValue > 2) {
                        this.$message.error('超过服务人数限制了！');
                        this.numbers = ''
                    }
                },
                deep: true, // 深度侦听
                immediate: true // 立即侦听
            }
        },
    }
</script>

<style lang="sass" scoped>
    @import '../../css/homecontent.scss'
</style>